<!--预定-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>宾客入住</title>
    <link rel="stylesheet" href="/hotel/css/layui.css">
    <link rel="stylesheet" href="/hotel/css/bootstrap.min.css">
    <link href="/hotel/css/bootstrap-datepicker3.min.css" rel="stylesheet"/>
    <!-- <link href="/hotel/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> -->
    <style>
        #button1{
            position:absolute;
            left:300px;
            top:250px;
            width: 150px;
        }
        #button2{
            position:absolute;
            left:290px;
            top:350px;
            width: 150px;
        }
        a:link{
            text-decoration:none;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">MISS后台管理系统</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    username
                </a>
            </li>
            <li class="layui-nav-item"><a href="">注销</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
                <li class="layui-nav-item">
                    <a href="index.html">首页</a>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">散客开单</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Guests_check_in.html" style="background-color: #1E90FF">宾客入住</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">订单</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Order.html">所有订单</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">宾客结账</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Ordinary_invoicing.html">结账</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">预定管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Query_book.html">查询预定</a></dd>
                        <dd><a href="Add_a_reservation.html">添加预定</a></dd>
                        <dd><a href="Edit_reservation.html">编辑预定</a></dd>

                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">营业查询</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Check-in_guest_enquiry.html">入住宾客查询</a></dd>
                        <dd><a href="Member_of_the_query.html">会员查询</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">系统设置</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Data_management.html">数据管理</a></dd>
                        <dd><a href="VIP_set_up.html">VIP设置</a></dd>
                        <dd><a href="Billing_Settings.html">计费设置</a></dd>
                        <dd><a href="Set_up_the_room.html">房间设置</a></dd>
                        <dd><a href="Operator_setup.html">操作员设置</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <div style="padding: 15px;">
            <h1>宾客入住</h1><br/>
            <div class="layui-form-item">
                <form action="/order/insert/attr/v" method="post">
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 200px;">
                            <input type="text" required="required" name="ocb[0].startTime" placeholder="入住" autocomplete="off" class="layui-input" id="input1">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline" style="width: 200px;">
                            <input type="text" required="required" name="ocb[0].endTime" placeholder="离店" autocomplete="off" class="layui-input" id="input2" onblur="daysTime()">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline" style="width: 80px;">
                            <button type="button" required="required" autocomplete="off" class="layui-btn layui-btn-primary" id="btn"></button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">房间类型</label>
                        <select name="ocb[0].roomtype.id" required="required" lay-verify="" class="form-control" style="width: 200px" id="selectOne">
                            <option>请选择房间类型</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">宾客姓名</label>
                        <input type="text" name="ocb[0].guestId.name" required="required" class="form-control" placeholder="输入宾客姓名" style="width: 200px">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">宾客身份证</label>
                        <input type="text" name="ocb[0].guestId.idCard" required="required" class="form-control" placeholder="输入身份证号" style="width: 200px">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">宾客手机号</label>
                        <input type="text" required="required" class="form-control" placeholder="输入手机号码" style="width: 200px">
                    </div>
                    <!-- <div class="form-group">
                        <label for="exampleInputEmail1">会员等级</label>
                        <select name="city" required="required" lay-verify="" class="form-control" style="width: 200px">
                            <option>请选择会员等级</option>
                            <option>普通会员</option>
                            <option>白金会员</option>
                            <option>黑卡会员</option>
                        </select>
                    </div> -->
                    <button type="submit" required="required" id="button1" class="layui-btn layui-btn-radius layui-btn-normal">生成订单</button>
                    <button type="reset" id="button2" class="layui-btn layui-btn-radius layui-btn-normal">重&#12288;&#12288;置</button>
                </form>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © MISS酒店
    </div>
</div>
<script src="/hotel/js/layui.all.js"></script>
<script src="/hotel/js/layui.js"></script>
<script src="/hotel/js/jquery.min.js"></script>
<script src="/hotel/js/bootstrap.min.js"></script>
<!-- <script src="/hotel/js/bootstrap-datetimepicker.min.js"></script>
<script src="/hotel/js/bootstrap-datetimepicker.zh-CN.js"></script> -->
<script src="/hotel/js/bootstrap-datepicker.min.js"></script>
<script src="/hotel/js/bootstrap-datepicker.zh-CN.min.js"></script>
<script type="text/javascript">
    /* $(document).ready(function() {
        $(".layui-inline input").datetimepicker({format:"yyyy-mm-dd hh:ii",language:"zh-CN",todayHighlight:true,todayBtn:true});
    }); */
    $(document).ready(function() {
        $(".layui-inline input").datepicker({
            language:"zh-CN"
        })
    });
</script>
<script>
    function daysTime(){
        var starttime=$("#input1").val();
        var endtime=$("#input2").val();
        if(starttime!=null && endtime!=null){
            d1=new Date(starttime.replace(/-/g,"/"));
            d2=new Date(endtime.replace(/-/g,"/"));
            var time=d2.getTime()-d1.getTime();
            var days=parseInt(time/(1000*60*60*24));
            var dayss = "共计";
            var day = "天";
            var daysAll = dayss+days+day;
            $("#btn").html(daysAll);
        }

    }
    function findType(){
        $.ajax({
            url:"/roomtype",
            type:"get",
            async:true,
            success:function (mes){
                var str="<option>请选择房间类型</option>";
                for(var i=0;i<mes.length;i++){
                    str+="<option value='"+mes[i].id+"'>"+mes[i].name+"</option>";
                }
                $("#selectOne").html(str);
            }
        });
    }
    findType();
</script>
</body>
</html>
<script>
    function sc() {
        var a = confirm("亲，您确定要添加吗？");
        if (a == true){
            //校验
            var $formData = $("#add_a_reservation").serialize();
            console.info($formData);
            alert("添加成功");
        }
    }
</script>
</body>
</html>